<template>
  <div class="con log">
    <div class="videoDome">
      <div class="main_title">
        <i class="iconfont el-icon-xitongrizhi"></i>&nbsp;日志管理
      </div>
      <div class="comtimes">
        用户名：
        <el-select v-model="value" filterable placeholder="请选择" size="mini">
          <el-option value="">全部</el-option>
          <el-option
            v-for="item in userTable"
            :key="item.user_id"
            :label="item.username"
            :value="item.username"
          >
          </el-option>
        </el-select>
        操作状态：<el-select v-model="status" placeholder="请选择" size="mini">
          <el-option value="">全部</el-option>
          <el-option value="成功">成功</el-option>
          <el-option value="失败">失败</el-option>
        </el-select>
        <tiems @change-time="changeTime" style="display: inline"></tiems>
        <el-button
          type="primary"
          @click="queryLog()"
          class="el-icon-search"
          size="mini"
        >
          查询
        </el-button>
      </div>
      <el-table
        :data="logData"
        ref="table"
        :row-style="{ height: 0 + 'px' }"
        :cell-style="{ padding: 5 + 'px' }"
        style="width: 100%"
        stripe
        height="68vh"
        :header-cell-style="tableHeaderColor"
      >
        <el-table-column prop="user_name" label="用户名" width="110">
        </el-table-column>
        <el-table-column prop="user_role" label="用户权限"> </el-table-column>
        <el-table-column prop="description" label="操作描述"> </el-table-column>
        <el-table-column prop="operating_state" label="操作状态">
        </el-table-column>

        <el-table-column prop="log_type" label="日志类型"> </el-table-column>
        <el-table-column prop="create_time" label="执行时间"> </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page.sync="page"
        :page-sizes="[limit, 20, 30, 50, 100]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import tiems from "@/components/Times.vue";
import { SearchUser, queryLog } from "@/http";
export default {
  name: "Log",
  components: {
    tiems,
  },
  data() {
    return {
      userTable: [],
      value: "",
      status: "",
      page: 1,
      limit: 15,
      total: 0,
      logData: [],
      starTime: "",
      endTime: "",
    };
  },
  watch: {
    status(newval) {
      console.log(newval);
      this.queryLog();
    },
    value() {
      this.queryLog();
    },
  },
  mounted() {
    this.queryUser();
    this.limit = Math.floor((window.innerHeight - 300) / 35);
    this.queryLog();
  },
  methods: {
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return "background-color: #009A9A;color: #fff;font-weight: 500;'font-size':'14px';height:20px;padding:8px 0";
      }
    },
    changeTime(val) {
      this.starTime = val[0];
      this.endTime = val[1] + " 23:59:59";
      this.queryLog();
    },
    queryLog() {
      queryLog({
        user_name: this.value,
        operating_state: this.status,
        startTime: this.starTime,
        endTime: this.endTime,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        this.logData = res.data;
        this.total = res.count;
      });
    },
    handleCurrentChange(val) {
      this.page = val;
      this.queryLog();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.queryLog();
    },
    queryUser() {
      SearchUser({
        page: 1,
        limit: 20,
      }).then((res) => {
        this.userTable = res.data;
        this.total = res.count;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.videoDome {
  width: 100%;
  height: 83.5vh;
  margin: 0;
}
.comtimes {
  margin-top: 25px;
  font-size: 14px;
  border-bottom: 1px solid #009688;
  margin-bottom: 10px;
  button {
    margin-left: 15px;
    margin-bottom: 15px;
  }
  .el-select {
    margin-right: 15px;
  }
  .el-input {
    width: 200px;
  }
}
</style>
